<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Gridster Grid Swapping Demo</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <link rel="stylesheet" type="text/css" href="/scripts/gridster.js/jquery.gridster.min.css">
    <script src="/scripts/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/scripts/gridster.js/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        var gridster = "";
        $(document).ready(function () {
            $(".gridster ul").gridster({
                widget_margins: [10, 10],
                widget_base_dimensions: [140, 140],
                shift_larger_widgets_down: false
            });
        });
    </script>
</head>

<body>
    <style>
        .gridster,
        .content {
            width: 940px;
            margin: 0 auto;

        }
    </style>
    <div class="content">
        <h1>Grid with larger widgets swapping spots with smaller ones</h1>
        <p>This demo represents using the branch in swap mode. This works best with shift_larger_widgets_down set to
            "false". However, smaller widgets do
            not displace larger ones.</p>
    </div>
    <div class="gridster">
        <ul style="height: 480px; position: relative; ">
            <li data-row="1" data-col="1" data-sizex="2" data-sizey="1" class="gs_w"></li>
            <li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="gs_w"></li>

            <li data-row="3" data-col="2" data-sizex="2" data-sizey="1" class="gs_w"></li>
            <li data-row="1" data-col="3" data-sizex="2" data-sizey="2" class="gs_w"></li>

            <li class="try gs_w" data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
            <li data-row="2" data-col="1" data-sizex="2" data-sizey="1" class="gs_w"></li>
            <li data-row="3" data-col="4" data-sizex="1" data-sizey="1" class="gs_w"></li>

            <li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs_w"></li>
            <li data-row="3" data-col="5" data-sizex="1" data-sizey="1" class="gs_w"></li>

            <li data-row="2" data-col="5" data-sizex="1" data-sizey="1" class="gs_w"></li>
            <li data-row="2" data-col="6" data-sizex="1" data-sizey="2" class="gs_w"></li>
        </ul>
    </div>
</body>

</html>